<template>
  <div v-if="visible" class="dialog-overlay" @click="close">
    <div class="dialog-content" @click.stop>
      <div class="dialog-header">
        <h3>编辑评论</h3>
        <button class="close-btn" @click="close">×</button>
      </div>

      <div class="dialog-body">
        <MdEditor
            v-model="localContent"
            :toolbars="toolbars"
            placeholder="请输入修改后的评论内容..."
            @on-upload-img="handleImageUpload"
        />
      </div>

      <div class="dialog-footer">
        <button class="btn btn-sm" @click="close">取消</button>
        <button class="btn btn-primary btn-sm" @click="save" :disabled="submitting">
          {{ submitting ? '提交中...' : '保存修改' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {defineEmits, defineExpose, defineProps, ref} from 'vue'
import {ElMessage} from 'element-plus'
import request from '@/utils/request'
import {MdEditor} from 'md-editor-v3'

const visible = ref(false)
const localContent = ref('')
const submitting = ref(false)

// 接收 props
const props = defineProps({
  commentId: {
    type: [Number, String],
    required: true
  },

})

// 工具栏配置
const toolbars = [
  'bold', 'italic', '|',
  'ul', 'ol', '|',
  'code', 'code-block', '|',
  'link', 'image', '|',
  'revoke', 'next'
]

// 图片上传处理
const handleImageUpload = async (files, callback) => {
  const formData = new FormData()
  formData.append('file', files[0])
  try {
    const res = await request.post('/api/attachment/upload-image', formData, {
      headers: {'Content-Type': 'multipart/form-data'}
    })
    callback([res.data])
  } catch (err) {
    ElMessage.error('图片上传失败')
    callback([])
  }
}

// 关闭弹窗
const close = () => {
  visible.value = false
}

// 打开弹窗
const open = (content) => {
  visible.value = true
  localContent.value = content
}

// 触发更新事件
const emit = defineEmits(['save'])

const save = async () => {
  const content = localContent.value.trim()
  if (!content) {
    ElMessage.warning('评论内容不能为空')
    return
  }
  if (content.length > 2000) {
    ElMessage.warning('评论内容不能超过2000字符')
    return
  }

  submitting.value = true
  try {
    await request.put(`/api/comments/${props.commentId}`, {content})
    ElMessage.success('评论已更新，等待审核')
    close()
    emit('save', content)
  } catch (error) {
    ElMessage.error(error.response?.data?.message || '提交失败，请稍后再试')
  } finally {
    submitting.value = false
  }
}

defineExpose({open, close})
</script>

<style scoped>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

.dialog-content {
  background: #fff;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #eee;
}

.dialog-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.close-btn:hover {
  background: #f5f5f5;
  color: #333;
}

.dialog-body {
  padding: 20px 24px;
}

.dialog-footer {
  padding: 16px 24px;
  text-align: right;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-primary {
  background: #409eff;
  color: white;
}

.btn-primary:hover {
  background: #337ecc;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>
